<template>
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        ref="search"
        :formProp="formData"
        @search="search"
        @change="change"
        :isShowSearch="true"
        :selectClear="true"
        class="ccui-highsearch no-print"
      >
        <div class="ccui-tab-wrapper">
          <el-button
            :type="isActive === index ? 'table-top-active' : 'table-top'"
            size="mini"
            v-for="(item, index) in focuses"
            :key="'tab' + index"
            @click="tabChange(item.focus)"
          >
            <template v-if="item.focus === 0">全部（{{ totalNum }}）</template>
            <template v-if="item.focus === 1">待提交</template>
            <template v-else-if="item.focus === 2">审批中</template>
            <template v-else-if="item.focus === 3">审批退回</template>
          </el-button>
        </div>
        <div class="ccui-extend-btn">
          <el-button
            type="primary"
            ref="pcconclease-new-item"
            icon="icon-ccui-add-sup"
            @click="goAdd"
            >新增
          </el-button>
        </div>
        <template slot="search">
          <el-input
            v-model="formData.moveInventoryName"
            clearable
            searchLabel="移库单名称"
            placeholder="请输入移库单名称模糊查询"
            @blur="handleTrim('moveInventoryName')"
          ></el-input>
          <el-input
            v-model="formData.moveInventoryCode"
            clearable
            searchLabel="移库单编号"
            placeholder="请输入移库单编号模糊查询"
          ></el-input>
          <el-input
            v-model="formData.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
          ></el-input>
          <el-input
            v-model="formData.originalWarehouseName"
            clearable
            searchLabel="原仓库"
            placeholder="请输入原仓库模糊查询"
            @blur="handleTrim('originalWarehouseName')"
          ></el-input>
          <el-input
            v-model="formData.targetWarehouseName"
            clearable
            searchLabel="目标仓库"
            placeholder="请输入目标仓库模糊查询"
            @blur="handleTrim('targetWarehouseName')"
          ></el-input>
          <el-select
            class="ccui-form-longInput"
            v-model="formData.billStatus"
            searchLabel="单据状态"
            placeholder="请选择单据状态查询"
            clearable
          >
            <el-option
              v-for="item in moveStoreList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>

          <el-date-picker
            v-model="formData.reportTime"
            searchLabel="编制日期"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </template>
        <!-- 表单高级搜索 -->
        <el-input
          v-model="formData.moveInventoryName"
          clearable
          searchLabel="移库单名称"
          placeholder="请输入移库单名称模糊查询"
          slot="searchItem1"
          @blur="handleTrim('moveInventoryName')"
        ></el-input>
        <el-input
          v-model="formData.moveInventoryCode"
          clearable
          searchLabel="移库单编号"
          placeholder="请输入移库单编号模糊查询"
          slot="searchItem2"
        ></el-input>
        <el-input
          v-model="formData.reportInOrgName"
          clearable
          searchLabel="填报单位"
          placeholder="请输入填报单位模糊查询"
          slot="searchItem3"
        ></el-input>
        <el-input
          v-model="formData.originalWarehouseName"
          clearable
          searchLabel="原仓库"
          placeholder="请输入原仓库模糊查询"
          slot="searchItem4"
          @blur="handleTrim('originalWarehouseName')"
        ></el-input>
        <el-input
          v-model="formData.targetWarehouseName"
          clearable
          searchLabel="目标仓库"
          placeholder="请输入目标仓库模糊查询"
          slot="searchItem5"
          @blur="handleTrim('targetWarehouseName')"
        ></el-input>
        <el-select
          class="ccui-form-longInput"
          v-model="formData.billStatus"
          searchLabel="单据状态"
          placeholder="请选择单据状态查询"
          clearable
          slot="searchItem6"
        >
          <el-option
            v-for="item in moveStoreList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>

        <el-date-picker
          v-model="formData.reportTime"
          searchLabel="编制日期"
          clearable
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          slot="searchItem7"
        />
      </el-search>
    </div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        :data="tableData"
        :fit="true"
        :cell-style="cellStyle"
        @cell-click="cellClick"
        border
        class="ccui-multifunctional-table"
      >
        <el-table-column label="序号" width="50" fixed>
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <template v-for="(table, index) in jsList.tableTheadOptions">
          <el-table-column
            :fixed="table.fixed || false"
            :key="index"
            :type="table.type"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :align="table.align || 'left'"
            :header-align="table.headerAlign || 'left'"
            :show-overflow-tooltip="true"
            :formatter="formatterList[table.formatterName]"
          >
          </el-table-column>
        </template>

        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              type="text"
              v-if="
                row.billStatus == '待提交' ||
                row.billStatus == '已撤回' ||
                row.billStatus == '审批退回'
              "
              @click="goEdit(row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              v-if="row.billStatus == '已撤回' || row.billStatus == '待提交'"
              @click="goDelete(row)"
              >删除
            </el-button>
            <el-button
              size="mini"
              type="text"
              v-if="row.billStatus == '审批中'"
              @click="goRecall(row)"
              >撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="ccui-table-footer">
        <div id="ccui-paging">
          <el-pagination
            :total="totalNum"
            :page-size="pageSizeCode"
            :current-page="pageNoCode"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            popper-class="ccui-paging-page-size-popper"
            @prev-click="handlePrev"
            @next-click="handleNext"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <el-button
            class="ccui-pagination-btn"
            size="mini"
            type="default"
            @click="handleSizeChange('none')"
            >确定
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moveStore from "../mixins/moveStore";
import jsList from "../js";
export default {
  mixins: [moveStore],
  data() {
    return {
      jsList,
      isActive: 0
    };
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (["移库单编号"].includes(column.label)) {
        return { color: "#0089EF", cursor: "pointer" };
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
